import { Button, Form } from '@douyinfe/semi-ui';
import { debounce, identity, isEqual, isNumber, pickBy } from 'lodash';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { IQueryParams } from '@/widgets/table-pagination';
import { usePageContext } from './context';
import { initialFilter } from './helper';
import { fetchAllDict, fetchDict } from '@/redux/dict/dict-api';

const ApplicationFilter = () => {
  const { Option } = Form.Select;
  const PageContext = usePageContext();
  const [appTypeOptions, setAppTypeOptions] = useState<any[]>([]);
  const [managedTypeOptions, setManagedTypeOptions] = useState<any[]>([]);
  const PageAction = useMemo(() => {
    return {
      addRecord: PageContext.addRecord,
      queryParams: PageContext.queryParams,
      setQueryParams: PageContext.setQueryParams,
    };
  }, [PageContext]);

  const applyFilter = useCallback(
    (values: any) => {
      const _queryParams: IQueryParams = {
        ...PageAction.queryParams,
        filter: { ...pickBy(values, identity), ...pickBy(values, isNumber) },
      };
      if (!isEqual(_queryParams, PageAction.queryParams)) {
        PageAction.setQueryParams({ ..._queryParams, pageNum: 1 });
      }
    },
    [PageAction.queryParams]
  );

  useEffect(() => {
    Promise.all([
      fetchDict({
        pageNum: 1,
        pageSize: 100,
        dictType: 'app',
      }),
      fetchDict({
        pageNum: 1,
        pageSize: 100,
        dictType: 'app_managed_type',
      }),
    ]).then(([res, res1]) => {
      console.log('字典请求结果--->', res, res1);
      setAppTypeOptions(res?.data?.data?.list);
      setManagedTypeOptions(res1?.data?.data?.list);
    });
  }, []);

  return (
    <Form
      validateFields={() => ''}
      layout='horizontal'
      labelPosition='left'
      className='gap-2 items-start'
      // onChange={(e) => {}}
      // onSubmit={() => {}}
      initValues={initialFilter}
      onValueChange={debounce((values, changedValue) => {
        applyFilter(values);
      }, 350)}
      onReset={() => applyFilter(initialFilter)}>
      <Form.Input
        field='title'
        label='应用名称'
        trigger='blur'
        placeholder='请输入'></Form.Input>
      <Form.Select
        field='status'
        label='应用状态'
        placeholder='请选择'
        style={{ width: '200px' }}>
        <Option value={'0'}>开启</Option>
        <Option value={'1'}>关闭</Option>
      </Form.Select>
      <Form.Select
        field='appManagedType'
        label='托管类型'
        placeholder='请选择'
        style={{ width: '200px' }}>
        {managedTypeOptions?.map((type: any, idx: any) => (
          <Option key={`type_${idx}`} value={type?.value}>
            {type?.label}
          </Option>
        ))}
      </Form.Select>
      <Form.Select
        field='categoryId'
        label='应用类型'
        placeholder='请选择'
        style={{ width: '200px' }}>
        {appTypeOptions?.map((type: any, idx: any) => (
          <Option key={`type_${idx}`} value={type?.value}>
            {type?.label}
          </Option>
        ))}
      </Form.Select>
      <div style={{ display: 'flex', alignItems: 'flex-end' }}>
        <Button htmlType='reset'>重置</Button>
      </div>
    </Form>
  );
};

export default ApplicationFilter;
